<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        .son {
            width: 200px;
            height: 200px;
            margin-top: 10px;
            background-color: powderblue;
        }
        .pink {
            background: pink;
        }
        .plum {
            background: plum;
        }
        .powderblue {
            background: powderblue;
        }
        .btn {
            border: 1px solid black;
            background-color: palegoldenord;
            font-size: 15px;
            border-radius: 2px;
            outline: none;
            cursor: pointer;
            width: 60px;
            height: 30px;
            color: white;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>1、核心：数据驱动：ViewModel保证数据和视图的一致性，
              组件系统：应用类UI</p>
        <p>2、区别：1.v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置IXM元素的display样式，
            block为显示，none为隐藏;<br>
            2.v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-
            show只是简单的基于css切换;<br>
            3.v-if有更高的切换消耗：v-show有更高的初始渲染消耗 <br>
            使用场景：如果需要非常频繁地切换，则使用 v-show 较好：如果在运行时条件很少改变，则使用v-if较好</p>
        <p>3、事件修饰符：.stop .prevent .capture.self .once .passive
              按键修饰符：.enter .tab .delete .esc .space .up .down .left .right
              系统修饰符：.ctrl .alt .shift .meta
              .exact 修饰符 
              鼠标修饰符：.left .right .middle
              自定义 .sync修饰符
              表单输入绑定 修饰符：.lazy .number .trim
        </p>
        <p>4、可以</p>
        <p>5、作用：用于  管理可复用的元素。因为Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
                   这么做使Vue变得非常快，但是这样也不总是符合实际需求</p>
        <p>6、
            <div v-for="a in 9">
                <span v-for="b in a">
                    {{b}}*{{a}}={{a*b}}
                </span>
            </div>
        </p>
        <!-- 点击按钮，切换颜色 -->
        <jqy></jqy>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: function() {
                return {
                   
                }
            },
        })
        Vue.component("jqy",{
            template:
            `
              <div>
                <button class="btn" @click="change('pink')" style="background-color:pink">按钮1</button>
                <button class="btn" @click="change('plum')" style="background-color:plum">按钮2</button>
                <button class="btn" @click="change('powderblue')" style="background-color:powderblue">按钮3</button>
                <son :color="col"></son>
              </div>
            `,
            data() {
                return {
                    col: "",
                }
            },
            methods: {
                change(a) {
                    this.col = a;
                }
            },
        })
        Vue.component("son",{
            template:
            `
              <div :class="[{pink:color=='pink'},'son',{plum:color=='plum'},
              {powderblue:color=='powderblue'}]"></div>
            `,
            props:["color"]
        })
        new Vue({el:"#app"})
    </script>
</body>
</html>